<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<link rel="stylesheet" type="text/css" href="./css/index.css" />
	<script src="./js/jQuery.js"></script>
	<!-- <script src="js/index.js" type="text/javascript" charset="UTF-8"></script> -->
	<title>主页</title>
</head>

<body>
	<div id="cover_mask"></div>
	<div id="container">
		<div id="header">
			<h2><a class="login1" href="">登录</a></h2>
			<span><a href="./register.html" target="_blank">注册</a></span>
		</div>
		<div id="search_div">
			<input type="search" placeholder="搜索你想要的" name="" id="" value="" />
			<button type="button">搜索</button>
		</div>
		<div class="nav">
			<div class="activebtn">我要买</div>
			<div class="">我要卖</div>
			<div class="">个人中心</div>
		</div>
		<div id="main">
			<p id="login">
				<input type="text" name="user_id" id="" value="" placeholder="账号" /><br />
				<input type="password" placeholder="密码" name="password" id="" value="" /><br />
				<input class="logininput" type="button" value="登录" /><br />
				<button type="button">X</button>
			</p>
			<div class="activediv" id="buy">
				大区:<select name="area" class="area">
					<option value="全部">全部</option>
					<option value="电信五区">电信五区</option>
					<option value="电信一区">电信一区</option>
					<option value="电信八区">电信八区</option>
					<option value="双线一区">双线一区</option>
					<option value="双线四区">双线三区</option>
				</select>
				&nbsp;&nbsp;服务器:<select name="server">
					<option value="请选择大区">请选择大区</option>
				</select>
				&nbsp;&nbsp;类型:<select name="type">
					<option value="全部">全部</option>
					<option value="金币">金币</option>
					<option value="金发">金发</option>
					<option value="红发">红发</option>
					<option value="黑发">挂宠</option>
					<option value="礼盒">礼盒</option>
					<option value="散件">散件</option>
					<option value="精简">精简</option>
					<option value="挂宠">挂宠</option>
					<option value="其他">其他</option>
				</select>
				<input style="float: none" type="submit" name="" id="" value="查询" />
				<table border="" cellspacing="0px" cellpadding="0px">
					<thead>
						<tr>
							<th>区服</th>
							<th>类型</th>
							<th>标题</th>
							<th>价格</th>
							<th>发布人</th>
							<th>联系方式</th>
							<th>发布时间</th>
						</tr>
					</thead>

					<tbody>

					</tbody>
				</table>
				<div class="pagination">
					<a href="javascript:;" class="prev">⌜</a>
					<a href="javascript:;" class="next">⌝</a>
				</div>
			</div>
			<div id="sell" class="">
				<div id="sell_div">
					<h2>请填写售卖信息</h2>
					<span>大区:</span>
					<select name="area" class="area">
						<option value="全部">全部</option>
						<option value="电信五区">电信五区</option>
						<option value="电信一区">电信一区</option>
						<option value="电信八区">电信八区</option>
						<option value="双线一区">双线一区</option>
						<option value="双线二区">双线二区</option>
						<option value="双线四区">双线三区</option>
					</select><br />
					<span>服务器:</span>
					<select name="server">
						<option value="不限">不限</option>
					</select><br />
					<span>类型:</span>
					<select name="type">
						<option value="全部">全部</option>
						<option value="金币">金币</option>
						<option value="金发">金发</option>
						<option value="红发">红发</option>
						<option value="黑发">挂宠</option>
						<option value="礼盒">礼盒</option>
						<option value="散件">散件</option>
						<option value="精简">精简</option>
						<option value="挂宠">挂宠</option>
						<option value="其他">其他</option>
					</select><br />
					<span>标题:</span>
					<input type="text" name="title" id="" value="" /><br />
					<span>价格:</span>
					<input type="text" name="price" id="" value="" /><br />
					<span>联系方式:</span>
					<input type="text" name="price" id="" value="" /><br />

					<input type="submit" name="" id="" value="确定发布" />
				</div>
			</div>
			<div id="per_center" class="">
				<div class="perdiv">
					<div class="pre_left">
						<span style="opacity: 1;">我的信息</span>
						<span>我发布的</span>
						<span>我的交易</span>
						<!-- <span></span> -->
					</div>
					<div class="pre_right">
						<div>
							<ul class="pre_right_ul1">
								<li>昵称:凶螺螺</li>
							</ul>
						</div>
						<div style="display: none;">
							<table border="0px" cellspacing="" cellpadding="">
								<thead>
									<tr>
										<th>区服</th>
										<th>商品</th>
										<th>价格</th>
										<th>联系方式</th>
										<th>发布时间</th>
										<th>删除</th>
									</tr>
								</thead>
								<tbody class="pre_right_tb">

								</tbody>
							</table>
						</div>
						<div style="display: none;">
							<table border="0px" cellspacing="" cellpadding="">
								<caption>我发布的</caption>
								<thead>
									<tr>
										<th>区服</th>
										<th>商品</th>
										<th>价格</th>
										<th>买家联系方式</th>
										<th>发布时间</th>
										<th>删除</th>
									</tr>
								</thead>
								<tbody class="pre_right_tb2">

								</tbody>
							</table>
							<table border="0px" cellspacing="" cellpadding="">
								<caption>我购买的</caption>
								<thead>
									<tr>
										<th>区服</th>
										<th>商品</th>
										<th>价格</th>
										<th>卖家联系方式</th>
										<th>发布时间</th>
										<th>删除</th>
									</tr>
								</thead>
								<tbody class="pre_right_tb3">

								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script>
	let User_information = [];
	//选项切换
	let login1Ele = document.querySelector(".login1");
	let navEle = document.querySelector(".nav");
	let btnEle = document.querySelectorAll(".nav>div");
	let divEle = document.querySelectorAll("#main>div");
	let areaEle = document.querySelectorAll(".area");
	//登录块
	let loginEle = document.querySelector("#login");
	//遮罩
	let coverEle = document.querySelector("#cover_mask");
	//登录取消按钮
	let cancelEle = document.querySelector("#login button");
	//登录按钮
	let logininputEle = document.querySelectorAll("#login input");
	let logindata = [btnEle[1], btnEle[2], login1Ele];
	// console.log($(".nav>div").eq(0).nextAll())
	// ($("#header a:first"), $(".nav>div").eq(0).nextAll()).mouseenter(function () {
	// 	console.log("点击了!");
	// })
	//显示区服
	$(".area").change(function () {
		var index = $(".area").index(this);
		$.post("php/index.php", {
			//传入信息
			area_name: `${this.value}`
		},
			function (data) {
				if (index == 0) {
					let opele = areaEle[index].nextElementSibling;
					// console.log(opele);
					render(data, opele);
				} else {
					let opele =
						areaEle[index].nextSibling.nextElementSibling
							.nextElementSibling;
					// console.log(opele);
					render(data, opele);
				}
			}, "json");
	})
	myfn()
	//判断是否登录函数
	function myfn() {
		// console.log(tdEle);
		if (User_information[0] != null) {
			logindata.forEach((item) => {
				item.onclick = function () {
					return false;
				};
			})
			//选项切换
			$(".nav>div").click(function () {
				$(this).attr("class", "activebtn").siblings().removeAttr("class", "activebtn");
				var index = $(".nav>div").index(this);
				$("#main>div").eq(index).attr("class", "activediv").siblings().removeAttr("class", "activediv");
			})
		} else {
			logindata.forEach((item) => {
				item.onclick = function (e) {
					e.preventDefault();
					// console.log(User_information);
					loginEle.style.display = "block";
					coverEle.style.display = "block";
				}
			})
		}
	}
	//点击取消登录
	cancelEle.onclick = function () {
		loginEle.style.display = "none";
		coverEle.style.display = "none";
	};
	//点击登录
	// console.log(logininputEle);
	logininputEle[2].onclick = function () {
		// console.log(logininputEle[0].value, logininputEle[1].value);
		if (logininputEle[0].value != 0) {
			$.post("php/index.php", {
				//传入信息
				user_id: `${logininputEle[0].value}`,
				password: `${logininputEle[1].value}`
			},
				function (data) {
					if (data) {
						//返回接受信息
						User_information[0] = data.id;
						User_information[1] = data.user_id;
						User_information[2] = data.user_name;
						User_information[3] = data.user_email;
						loginEle.style.display = "none";
						coverEle.style.display = "none";
						myfn()
						login1Ele.innerHTML = `昵称:${User_information[2]}`;
						Prerender();
					} else {
						alert("用户名或密码错误,请重新登录!");
					}
				}, "json");
		}
	}
	// Prerender()
	// // 个人中心数据渲染
	function Prerender() {
		//渲染个人中心
		let pre_rigrht_ul1Ele = document.querySelector(".pre_right_ul1");
		let pre_rigrht_tbEle = document.querySelector(".pre_right_tb");
		let pre_rigrht_tb2Ele = document.querySelector(".pre_right_tb2");
		let pre_rigrht_tb3Ele = document.querySelector(".pre_right_tb3");
		pre_rigrht_ul1Ele.innerHTML = `
			<li> 昵称:${User_information[2]}<button>修改昵称</button></li>
			<li> 联系方式:${User_information[3]}<button>修改联系方式</button></li>
			 <li><button>修改密码</button></li>
			 `;
		//查看发布的信息
		$.post("php/index.php", {
			//传入信息
			pre: true,
			u_id: `${User_information[1]}`
		},
			function (data) {
				pre_rigrht_tbEle.innerHTML = "";
				data.forEach((item, index) => {
					var trEle = document.createElement("tr");
					trEle.innerHTML =
						`<td>${item.server_name}</td> <td>${item.title}</td> <td>${item.price}</td> <td>${item.contace}</td> <td>${item.nowtime}</td><td><button>下架</button></td>`;
					pre_rigrht_tbEle.appendChild(trEle);

				})
			}, "json");
		//渲染买家信息
		$.post("php/index.php", {
			//传入信息
			buy: true,
			u_id: `${User_information[1]}`
		},
			function (data) {
				pre_rigrht_tb2Ele.innerHTML = "";
				data.forEach((item, index) => {
					var trEle = document.createElement("tr");
					trEle.innerHTML =
						`<td>${item.server_name}</td> <td>${item.title}</td> <td>${item.price}</td> <td>${item.c_contace}</td> <td>${item.nowtime}</td><td><button>删除记录</button></td>`;
					pre_rigrht_tb2Ele.appendChild(trEle);
				})
			}, "json");
		// //渲染卖家信息
		$.post("php/index.php", {
			sell: true,
			u_id: `${User_information[1]}`
		},
			function (data) {
				pre_rigrht_tb3Ele.innerHTML = "";
				data.forEach((item, index) => {
					var trEle = document.createElement("tr");
					trEle.innerHTML =
						`<td>${item.server_name}</td> <td>${item.title}</td> <td>${item.price}</td> <td>${item.u_contace}</td> <td>${item.nowtime}</td><td><button>删除记录</button></td>`;
					pre_rigrht_tb3Ele.appendChild(trEle);

				})
			}, "json");
	}
	//个人中心选项切换
	$(".pre_left>span").click(function () {
		$(this).css("opacity", "1").siblings().css("opacity", "0.5");
		// $(this).siblings().css("opacity", "0.5");
		var index = $(".pre_left>span").index(this);
		$(".pre_right>div").eq(index).css("display", "block").siblings().css("display", "none");
		// $(".pre_right>div").eq(index).siblings().css("display", "none");
	})
	//信息发布模块
	let sellSeEle = document.querySelectorAll("#sell_div>select");
	let sellInEle = document.querySelectorAll("#sell_div>input");
	// console.log(sellSeEle, sellInEle);
	sellInEle[3].onclick = function () {
		if (sellInEle[0].value && sellInEle[1].value && sellInEle[2].value != null) {
			$.post("php/index.php", {
				server_name: `${sellSeEle[1].value}`,
				type: `${sellSeEle[2].value}`,
				title: `${sellInEle[0].value}`,
				price: `${sellInEle[1].value}`,
				contace: `${sellInEle[2].value}`,
				u_id: `${User_information[1]}`,
				user_name: `${User_information[2]}`
			},
				function (data) {
					if (data.status == 1) {
						sellInEle[0].value = "";
						sellInEle[1].value = "";
						sellInEle[2].value = "";
						alert("发布成功");
						renderdom();
						Prerender();
					} else {
						alert("内容不能为空,请补全发布");
					}
				}, "json");
		}
	}
	//移除class名
	function clearclass(box, classname) {
		[...box].forEach(function (item) {
			item.classList.remove(classname);
		});
	}
	//渲染函数
	function render(data, ulele) {
		// console.log(data);
		ulele.innerHTML = "";
		data.forEach(function (item) {
			let opEle = document.createElement("option");
			// liEle.className = "news";
			opEle.innerHTML = `${item.server_name}`;
			ulele.appendChild(opEle);
		});
	}
	let count = 10;
	// 页面加载渲染
	window.onload = function () {
		$.post("php/index.php", {
			cmd: true
		},
			function (data) {
				var newdata1 = [];
				for (var k = 0; k < count; k++) {
					newdata1.push(data[k]);
				}
				renderdom(newdata1)
				createPage(data);
			}, "json");
		//分页渲染
		function createPage(data) {
			var p = Math.ceil(data.length / count);
			var paginationEle = document.querySelector(".pagination");
			var nextEle = document.querySelector(".next");
			for (var i = 1; i <= p; i++) {
				var a = document.createElement("a");
				a.href = "javascript:;";
				a.innerHTML = i;
				paginationEle.insertBefore(a, nextEle);

				a.onclick = function () {
					let page = this.innerHTML;
					let newdata = [];
					for (var j = (page - 1) * count; j < (page - 1) * count + count; j++) {
						newdata.push(data[j]);
					}
					renderdom(newdata);

				}


			}

		}

	}
	function renderdom(data) {
		let tbodyEle = document.querySelector("#buy tbody");
		tbodyEle.innerHTML = "";
		data.forEach(function (item, index) {
			let trEle = document.createElement("tr");
			// liEle.className = "news";
			trEle.innerHTML = `
						<td>${item.server_name}</td>
						<td>${item.type}</td>
						<td>${item.title}</td>
						<td>${item.price}</td>
						<td>${item.user_name}</td>
						<td class="look"><button>购买</button></td>
						<td>${item.nowtime}</td>
						`;
			tbodyEle.appendChild(trEle);
			var tdEle = document.querySelectorAll(".look");
			// console.log(tdEle);
			tdEle[index].onclick = function () {
				Prerender()
				if (User_information[0] != null) {
					//发送联系方式给卖家并查看
					var calllist = window.confirm("确定发送你的联系方式并查看该联系方式吗?");
					// console.log(calllist);
					if (calllist != false) {
						tdEle[index].innerHTML = `${item.contace}`;
						$.post("php/index.php", {
							call: "true",
							u_id: `${item.u_id}`,
							u_contace: `${item.contace}`,
							c_contace: `${User_information[3]}`,
							c_id: `${User_information[1]}`,
							l_id: `${item.id}`,
						},
							function (data) {
							}, "json");
					}
				} else {
					loginEle.style.display = "block";
					coverEle.style.display = "block";
				}
			}
		})
	}
</script>

</html>